<!DOCTYPE HTML>
<html>
<head>
    <title>硬件设置</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="../../resources/lib/bui/css/dpl-min.css" rel="stylesheet" type="text/css" />
    <link href="../../resources/lib/bui/css/bui-min.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .icon-pkg,.icon-example,.task,.task-folder{
            background: url('http://img04.taobaocdn.com/tps/i4/T12.xMFiNXXXanXMzg-20-680.gif') no-repeat -999px -999px;
        }

        .icon-pkg{
            background-position: 0 0;
        }
    </style>
</head>
<body>
<div class="row" style="padding: 10px;">
    <div class="span6" style="height: 200px;">
        <div class="panel panel-head-borded panel-small span6" style="position: fixed;">
            <div class="panel-header">
                <h3>控制器</h3>
            </div>
            <div id="tree">
            </div>
        </div>
    </div>
    <div class="span20" id="right_content">
    </div>
</div>

<script type="text/javascript" src="../../resources/lib/bui/js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="../../resources/lib/bui/js/bui-min.js"></script>
<!--<script src="http://g.tbcdn.cn/fi/bui/bui-min.js?t=201308062006"></script>-->
<script type="text/javascript">
    var Tree = BUI.Tree;

    //树节点数据，
    //text : 文本，
    //id : 节点的id,
    //leaf ：标示是否叶子节点，可以不提供，根据childern,是否为空判断
    //expanded ： 是否默认展开
    var data = [
        {text: '系统控制器1', id: '1', expanded: true, type:'mc', children: [
            {text: '门控制器1', id: '11', cls: 'icon-pkg'},
            {text: '门控制器2', id: '12', cls: 'icon-pkg'}
        ]},
        {text: '系统控制器2', id: '2', expanded: true, type:'mc', children: [
            {text: '门控制器3', id: '21', cls: 'icon-pkg', type:'dc', children:[
                {text: '门', id: '211', type:'door'},
                {text: '读卡器', id: '212', type:'reader'},
                {text: '输入', id: '213', type:'input'},
                {text: '继电器', id: '214', type:'delay'}
            ]},
            {text: '22', id: '22'}
        ]},
        {text: '系统控制器3', id: '3'},
        {text: '报警控制器4', id: '4'}
    ];
    //由于这个树，不显示根节点，所以可以不指定根节点
    var tree = new Tree.TreeList({
        render : '#tree',
        height: '100%',
        nodes : data
    });
    tree.render();

    tree.on('itemclick',function(ev){
        var item = ev.item;
        if(item.type == 'mc') {
            $('#right_content').load('hardware_mc.html');
        } else if (item.type == 'dc') {
            $('#right_content').load('hardware_dc.html', null, function() {
                BUI.FormHelper.setFields($("#door_base_form")[0], {'name': item.text});
            });
        } else if (item.type == 'door') {
            $('#right_content').load('hardware_door.html');
        } else if (item.type == 'reader') {
            $('#right_content').load('hardware_reader.html');
        } else if (item.type == 'delay') {
            $('#right_content').load('hardware_delay.html');
        } else if (item.type == 'input') {
            $('#right_content').load('hardware_input.html');
        }
        //$('.log').text(item.text);
    });

</script>
</body>
</html>
